<template>
	<view>
		<!-- 		<view style="margin: 10px 10px 0 10px;">
			<u-button text="轨迹回放" type="primary" @click='fnTrajectory'></u-button>
		</view> -->
		<!-- 风险预警 -->
		<view class="carInfo" v-if="infoData.length==0">
			<view v-for="items in infoObj">
				<view>
					<view class="carInfo_item_label">日志单号：</view>
					<view class="carInfo_item_value">{{items.billNo}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">开始日期：</view>
					<view class="carInfo_item_value">{{items.loadingAddr}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">预计结束日期：</view>
					<view class="carInfo_item_value">{{items.unloadingAddr}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">线路起点：</view>
					<view class="carInfo_item_value">{{items.loadingDate}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">线路终点：</view>
					<view class="carInfo_item_value">{{items.unloadingDate}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">车牌号码：</view>
					<view class="carInfo_item_value">{{items.goodsInfo}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">车牌颜色：</view>
					<view class="carInfo_item_value">{{items.goodsInfo}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">挂车车牌号码：</view>
					<view class="carInfo_item_value">{{items.goodsInfo}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">活动事由：</view>
					<view class="carInfo_item_value">{{items.goodsInfo}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">具体事宜：</view>
					<view class="carInfo_item_value">{{items.goodsInfo}}</view>
				</view>
				<view>
					<view class="carInfo_item_label">填报日期：</view>
					<view class="carInfo_item_value">{{items.goodsInfo}}</view>
				</view>
			</view>
		</view>
		<view class="cont" v-else>
			<!-- 信息面板 -->
			<u-collapse :value="[1]">
				<u-collapse-item title="运单信息" v-for="(item,index) in infoData" :name="index+1">
					<view class="carInfo">
						<h4 class='carInfo_text'>运单基本信息</h4>
						<view class="carInfo_item">
							<view class="carInfo_item_label">运单编号：</view>
							<view class="carInfo_item_value">{{item.billNo}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">起运地：</view>
							<view class="carInfo_item_value">{{item.loadingAddr}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">目的地:</view>
							<view class="carInfo_item_value">{{item.unloadingAddr}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">起运日期：</view>
							<view class="carInfo_item_value">{{item.loadingDate}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">到达日期：</view>
							<view class="carInfo_item_value">{{item.unloadingDate}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">货物信息：</view>
							<view class="carInfo_item_value">{{item.goodsInfo}}</view>
						</view>
					</view>
					<view class="carInfo">
						<h4 class='carInfo_text'>挂车信息</h4>
						<view class="carInfo_item">
							<view class="carInfo_item_label">挂车车牌号：</view>
							<view class="carInfo_item_value">{{item.trailerVehCode}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">营运状态：</view>
							<view class="carInfo_item_value">
								{{getDictValue(selectOptions.ccert_state,item.certsate) || ""}}
							</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">经营范围：</view>
							<view class="carInfo_item_value">{{item.mgrArea}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">道路运输证号：</view>
							<view class="carInfo_item_value">{{item.trailerCertNo}}</view>
						</view>
					</view>
					<view class="carInfo">
						<h4 class='carInfo_text'>驾押人员</h4>
						<view class="carInfo_item">
							<view class="carInfo_item_label">驾驶员姓名：</view>
							<view class="carInfo_item_value">{{item.driverName}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">从业资格证号：</view>
							<view class="carInfo_item_value">{{item.driverCertNo}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">从业资格证有效期：</view>
							<view class="carInfo_item_value">{{item.driverExpireDate}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">押运员姓名：</view>
							<view class="carInfo_item_value">{{item.escortName}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">从业资格证号：</view>
							<view class="carInfo_item_value">{{item.escortCertNo}}</view>
						</view>
						<view class="carInfo_item">
							<view class="carInfo_item_label">从业资格证有效期：</view>
							<view class="carInfo_item_value">{{item.escortExpireDate}}</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import {getCarDetail} from '@/common/api/monitor.js'
	// import trajectoryTracking from './trajectoryTracking.vue'
	export default {
		components: {
			// trajectoryTracking
		},
		data() {
			return {
				infoData: {
					billNo: "",
					loadingAddr: "",
					unloadingAddr: "",
					goodsInfo: "",
					startTransTime: "",
					vehCode: "",
					mgrArea: "",
					ccertId: "",
					driverName: "",
					driverValidEndDate: "",
					escortName: "",
					escortValidEndDate: "",
				},
				infoObj: {},
				// 字典值
				selectOptions: {
					// // 企业经营状态
					// owner_state: [],
					// owner_state_obj: {},
					// 车辆营运状态
					ccert_state: [],
					// ccert_state_obj: {},
					// // 运单状态
					// bill_state: [],
					// bill_state_obj: {},
				},

			}
		},
		mounted() {
			this.initSelect()
		},
		methods: {
			initSelect() {
				// this.$api.getDict("bill_state").then((res) => {
				// 	this.selectOptions["bill_state"] = res.data.data.map((item) => {
				// 		this.selectOptions["bill_state_obj"][item.dictKey] = item.dictValue;
				// 		return {
				// 			label: item.dictValue,
				// 			value: item.dictKey,
				// 		};
				// 	});
				// });
				// this.$api.getDict("owner_state").then((res) => {
				// 	this.selectOptions["owner_state"] = res.data.data.map((item) => {
				// 		this.selectOptions["owner_state_obj"][item.dictKey] = item.dictValue;
				// 		return {
				// 			label: item.dictValue,
				// 			value: item.dictKey,
				// 		};
				// 	});
				// });
				this.$api.getDict("ccert_state").then((res) => {
					this.selectOptions.ccert_state = res.data.data
					// res.data.data.map((item) => {
					// 	this.selectOptions["ccert_state_obj"][item.dictKey] = item.dictValue;
					// });
				});

			},
			getDictValue(list, value) {
				let target = list.filter((v) => v.dictKey == value)[0];
				return (target && target.dictValue) || "";
			}
		},

		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			let arrList = JSON.parse(option.formSearch)
			this.infoData = arrList.billInfos
			this.infoObj = arrList.outTrafficVOs

			console.log(312, arrList)
		}
	}
</script>

<style lang="scss" scoped>
	.cont {
		padding: 30rpx;
		width: calc(100% - 60rpx);
		height: auto;


		// 折叠面板
		::v-deep {
			.u-collapse {
				.u-collapse-item {
					.u-cell {
						background-color: #788AD1;

						.u-cell__title-text {
							color: #fff;
							font-weight: bold;
							font-size: 28rpx;
						}
					}

					.u-icon__icon--info {
						color: #fff;
					}
				}
			}
		}
	}

	.carInfo {
		.carInfo_item {
			width: 100%;
			// height: 48rpx;
			font-size: 22rpx;
			// display: flex;
			// justify-content: space-between;
			// line-height: 48rpx;
			padding: 10rpx 0;
		}

		.carInfo_text {
			margin: 20rpx 0;
			border-left: 1px #5881dc solid;
			padding: 0 0 0 10rpx;
			color: #5881dc;
		}

		.carInfo_item_label {
			position: relative;
			padding-left: 20rpx;
			width: 40%;
			display: inline-block;
		}

		.carInfo_item_label::after {
			position: absolute;
			content: '';
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			background: #C3CEFD;
			top: 20rpx;
			left: 0;
		}

		.carInfo_item_value {
			width: 55%;
			color: #020C46;
			text-align: left;
			display: inline-block;
		}
	}

	.carBox {
		width: 92%;
		text-align: center;
		margin: 15px 15px 0 15px;
		border: 1px #DAE1FF solid;
		padding: 10px 0;

		.carStatus {
			display: inline-block;
			width: 30%;

			.carStatus_text {
				width: 100%;
				text-align: center;
				display: inline-block;
				margin: 3px 0;
			}
		}
	}
</style>